<template>
  <div id="exchangeorderlist"> 


          <el-table :data="datalist" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">

               
                <el-table-column label="订单时间"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.time }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="兑换数量"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.real_number }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="实际数量"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.number }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="兑换折扣"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.discount }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="订单状态"  align='center'  >                   
                    <template slot-scope="scope">                   
                        <!-- <span v-if="scope.row.status == 'WAIT_AGREE_SELLER'">等待卖家同意兑换</span> -->
                        <span v-if="scope.row.status == 'SELLER_REFUSE_APPLY'">卖家拒绝兑换</span>
                        <span v-if="scope.row.status == 'WAIT_SUBMIT_VOUCHER'"> 待上传凭证</span>
                        <!-- <span v-if="scope.row.status == 'SUBMITTED_VOUCHER'"> 已提交凭证</span> -->
                        <span v-if="scope.row.status == 'SUBMITTED_VOUCHER'"> 待确认/上传凭证</span>
                        <span v-if="scope.row.status == 'REJECT'"> 驳回</span>
                        <span v-if="scope.row.status == 'RESUBMITTED_VOUCHER'">重新提交凭证</span>
                        <span v-if="scope.row.status == 'APPEAL_SELLER'">出让方申述</span>
                        <span v-if="scope.row.status == 'APPEAL_BUYER'">兑换方申述</span>
                        <span v-if="scope.row.status == 'CONFIRMED'">已完成</span>
                        <span v-if="scope.row.status == 'NOT_SUMBIT_IN_TEN_MINUTES'">60分钟未上传</span>
                        <span v-if="scope.row.status == 'NOT_SUMBIT_IN_TEN_MI'"> 60分钟未上传</span>
                        <span v-if="scope.row.status == 'NOT_SUMBIT_FOR_SECOND'">未二次上传</span>
                        <span v-if="scope.row.status == 'SELLER_OVERTIME'">超时自动完成</span>
                        <span v-if="scope.row.status == 'CANCELLED_BUYER'">兑换方确认申诉</span>
                        <span v-if="scope.row.status == 'CANCELLED_SELLER'">出让方确认申诉</span>
                        <span v-if="scope.row.status == 'WAIT_ADMIN_EXAMINE'">等待后台审核</span>
                        <span v-if="scope.row.status == 'ERROR_FOR_BUYER'">兑换方责任</span>
                        <span v-if="scope.row.status == 'ERROR_FOR_SELLER'">出让方责任</span>
                        <span v-if="scope.row.status == 'WAIT_AGREE_SELLER'">等待确认</span>
                    </template>
                </el-table-column>
                <el-table-column label="出让方账号"  align='center'  width="180" >                   
                    <template slot-scope="scope">  
                        <div style="display:flex;align-items: center;justify-content: center;">                 
                            <span >{{ scope.row.saler_telphone }}</span>
                            <img src="@/assets/images/a3.png" v-if="scope.row.buy_type == 1" style="width:20px;height:20px;margin-left:10px;"  @click="mtk2_but(scope.row.saler_telphone,scope.row,scope.row.superior_uid)"/>
                            <img src="@/assets/images/a9.png" v-if="scope.row.buy_type == 1" style="width:18px;height:20px;margin-left:5px;" @click="goinforpersonal(scope.row,scope.row.saler_telphone)"/>
                        </div>   
                    </template>
                </el-table-column>
                <!-- <el-table-column label="出让方姓名"  align='center'  width="150" >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.saler_nickname }}</span>
                    </template>
                </el-table-column> -->
                 <el-table-column label="兑换方账号"  align='center'  width="180" >                   
                    <template slot-scope="scope">
                         <div style="display:flex;align-items: center;justify-content: center;">                 
                            <span >{{ scope.row.buyer_telphone }}</span>
                            <img src="@/assets/images/a3.png" style="width:20px;height:20px;margin-left:10px;" @click="mtk2_but(scope.row.buyer_telphone,scope.row,scope.row.buyer_uid)" />
                           <img src="@/assets/images/a9.png" v-if="scope.row.buyer_telphone" style="width:18px;height:20px;margin-left:5px;" @click="goinforpersonal(scope.row,scope.row.buyer_telphone)"/>
                        </div>                    
                    </template>
                </el-table-column>
                <el-table-column label="是否新手"  align='center' width="250">                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.novice == 0">正常</span>
                        <span v-if="scope.row.novice == 1">新手</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="兑换方姓名"  align='center'  width="150" >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.buyer_nickname }}</span>
                    </template>
                </el-table-column>         -->
                 <el-table-column label="上传凭证"  align='center' width="100" >                   
                    <template slot-scope="scope">                   
                           <span  class="see_span"  @click="mtk3_but(scope.row)"><i class="el-icon-document-copy"></i></span>         
                    </template>
                </el-table-column> 
 
                 <el-table-column label="操作" align='center' width="150px"  fixed="right">
                    <template slot-scope="scope">
                        <span  v-if="scope.row.status == 'WAIT_ADMIN_EXAMINE'">
                            <el-button size="mini"  type="primary"  class="button_class1"  plain @click="select_zr_but(scope.row)">责任判定</el-button> 
                        </span>
                    </template>
                </el-table-column>
            </el-table>  

            <el-dialog title="选择判定方" :visible.sync="mtk1"  width="400px" >
                <el-form ref="form" :model="mtk1_from"  label-width="100px" style="width:100%;">
                        <el-radio-group v-model="mtk1_from.radio1" size="medium" style="display:flex;" @change="select_change" >
                            <el-radio label="2" border style="flex:1;">出兑方</el-radio>
                            <el-radio label="1" border style="flex:1;">兑换方</el-radio>
                        </el-radio-group>
                        <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                        <el-button type="primary" style="width:100%;" class="" @click="select_zr_but_qr" >确认</el-button>
                        </div>
                </el-form>
           </el-dialog> 

          
            <el-dialog :title="mtk2_from.telphone + '-收款方式'" :visible.sync="mtk2"  width="700px" >
                 <div class="title_box" style="margin-top:-30px;">
                      <div class="dian"></div>
                      <div class="title_name">用户信息</div>
                </div>
                 <div class="box_top">
                    <div class="box_top_img">
                    <img :src="urlimg + mtk2_from.head_img" />
                    </div>
                    <div class="box_top_con">
                    <div class="box_top_name">{{ mtk2_from.nickname }}</div>
                    <div class="box_top_id">ID:{{ mtk2_from.telphone }}</div>
                    </div>
                </div>
                <div class="title_box" style="margin-top:10px;">
                      <div class="dian"></div>
                      <div class="title_name">收款码</div>
                </div>
                <div class="box_img_box">
                    <div class="item_img_box">                  
                          <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListwx"
                                :src="urlimg + mtk2_from.datalist.srcListwx" 
                                :preview-src-list="mtk2_from.datalist.srcList1" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                           </span> 
                         <div class="item_img_name">收款码（微信）</div>
                     </div>
                     <div class="item_img_box">                     
                        <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListzfb"
                                :src="urlimg + mtk2_from.datalist.srcListzfb" 
                                :preview-src-list="mtk2_from.datalist.srcList2" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                         </span>
                         <div class="item_img_name">收款码（支付宝）</div>
                     </div>
                     <div class="item_img_box">                   
                          <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListysf"
                                :src="urlimg + mtk2_from.datalist.srcListysf" 
                                :preview-src-list="mtk2_from.datalist.srcList3" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                           </span>
                          <div class="item_img_name">收款码（云闪付）</div>
                     </div>
                     <div class="item_img_box">                  
                         <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListjh"
                                :src="urlimg + mtk2_from.datalist.srcListjh" 
                                :preview-src-list="mtk2_from.datalist.srcList4" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                         </span>
                          <div class="item_img_name">收款码（聚合）</div>
                     </div>
                     <div class="item_img_box">
                           <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListyhk"
                                :src="urlimg + mtk2_from.datalist.srcListyhk" 
                                :preview-src-list="mtk2_from.datalist.srcList5" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                         </span>
                         <div class="item_img_name">收款码（银行卡）</div>
                     </div>
                </div>

           </el-dialog> 


            <el-dialog title="上传凭证" :visible.sync="mtk3"  width="700px" >
                
                <div class="title_box" style="margin-top:-30px;">
                      <div class="dian"></div>
                      <div class="title_name">上传凭证</div>
                </div>
                <div class="box_img_box">
                    <div class="item_img_box">                  
                         <span > 
                            <el-image  
                                v-if="mtk3_from.datalist.voucher_link"
                                :src="urlimg + mtk3_from.datalist.voucher_link" 
                                :preview-src-list="mtk3_from.datalist.voucher_linkList" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                         </span>
                         <div class="item_img_name">上传凭证</div>
                     </div>
                     <div class="item_img_box">                     
                         <span > 
                            <el-image  
                                v-if="mtk3_from.datalist.again_voucher_link"
                                :src="urlimg + mtk3_from.datalist.again_voucher_link" 
                                :preview-src-list="mtk3_from.datalist.again_voucher_linkList" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                         </span>
                         <div class="item_img_name">新上传</div>
                     </div>
                     <div class="item_img_box">                  
                          <span > 
                            <el-image  
                                v-if="mtk3_from.datalist.reason_picture"
                                :src="urlimg + mtk3_from.datalist.reason_picture" 
                                :preview-src-list="mtk3_from.datalist.reason_picturelist" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                         </span>
                          <div class="item_img_name">出让方驳回</div>
                     </div>
                   
                       <div class="item_img_box">
                                <span v-if="mtk3_from.datalist.status == 'APPEAL_SELLER'"> 
                                    <el-image  
                                        v-if="mtk3_from.datalist.appeal_picture"
                                        :src="urlimg + mtk3_from.datalist.appeal_picture" 
                                        :preview-src-list="mtk3_from.datalist.appeal_picturelist" class="imga imgbox">
                                    </el-image>
                                    <span v-else>
                                        <img class="imgbox" src="@/assets/images/a6.png"/>
                                    </span>  
                                </span>
                                <span v-else>
                                    <img class="imgbox" src="@/assets/images/a6.png"/>
                                </span>
                                <div class="item_img_name">出让方申述</div>
                     </div>
                      <div class="item_img_box">                  
                            <span v-if="mtk3_from.datalist.status == 'APPEAL_BUYER'"> 
                                <el-image  
                                    v-if="mtk3_from.datalist.appeal_picture"
                                    :src="urlimg + mtk3_from.datalist.appeal_picture" 
                                    :preview-src-list="mtk3_from.datalist.appeal_picturelist" class="imga imgbox">
                                </el-image>
                                <span v-else>
                                    <img class="imgbox" src="@/assets/images/a6.png"/>
                                </span>  
                            </span>
                            <span v-else>
                                <img class="imgbox" src="@/assets/images/a6.png"/>
                            </span>
                            <div class="item_img_name" >兑换方申述</div>
                     </div>
                </div>

           </el-dialog> 


   </div>
</template>

<script>

export default {
   name: 'exchangeorderlist',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        mtk1:false,
        my_orderno:'',
        mtk1_from:{
           radio1:'1'
        },

        mtk2:false,
        mtk2_from:{
           datalist:{},
           telphone:'',
           head_img:'',
           nickname:''
        },

        mtk3:false,
        mtk3_from:{
          datalist:[]
        }
        

    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 348
      
  },
  mounted (){
    
  },
  methods: {
    select_zr_but(row){
        this.my_orderno = row.orderno
         this.mtk1 = true
    },
    select_change(val){
    //   console.log(val)
    },
    select_zr_but_qr(){

        if(this.mtk1_from.radio1 == 1){ //兑换方

            this.post("/trade_kmb/buyReason", {
                orderno:this.my_orderno
                }).then(res => {

                    if(res.error_code == 0){
                        this.open1(res.result,'success')  //提示框
                        this.$emit('up_list_fun')
                        this.mtk1 = false
                        this.my_orderno = ''
                    }else {
                    this.open1(res.message,'warning')
                }

            })

        }else if(this.mtk1_from.radio1 == 2){   //出让方

           this.post("/trade_kmb/saleReason", {
                orderno:this.my_orderno
                }).then(res => {

                    if(res.error_code == 0){
                        this.open1(res.result,'success')  //提示框
                        this.$emit('up_list_fun')
                        this.mtk1 = false
                        this.my_orderno = ''
                    }else {
                    this.open1(res.message,'warning')
                }

            })

        }
    },
    mtk2_but(telphone,row,uid){

          this.post("/member/infoOfSomeone", {
              uid:uid,
	        }).then(res => {
              this.mtk2_from.head_img = res.result.head_img
              this.mtk2_from.telphone = res.result.telphone
              this.mtk2_from.nickname = res.result.nickname
            
                for(let a of res.result.qr_code) {

                if(a.collection_type == 1){
                    res.result.srcListwx = a.collection_picture
                    res.result.srcList1 = [this.urlimg + a.collection_picture]
                }else if(a.collection_type == 2){
                    res.result.srcListzfb = a.collection_picture
                    res.result.srcList2 = [this.urlimg + a.collection_picture]
                }else if(a.collection_type == 3){
                    res.result.srcListysf = a.collection_picture
                    res.result.srcList3 = [this.urlimg + a.collection_picture]
                }else if(a.collection_type == 4){
                    res.result.srcListjh = a.collection_picture
                    res.result.srcList4 = [this.urlimg + a.collection_picture]
                }else if(a.collection_type == 5){
                    res.result.srcListyhk = a.collection_picture
                    res.result.srcList5 = [this.urlimg + a.collection_picture]
                }

                }

             this.mtk2_from.datalist  =    res.result  
             console.log(this.mtk2_from.datalist)
         })

          this.mtk2 = true
    },
    mtk3_but(row){
          this.mtk3_from.datalist = row
          console.log(this.mtk3_from.datalist)
          this.mtk3 = true
    },
    goinforpersonal(row,telphone){      
        this.$router.push({
          path: '/index/inforpersonal',
          query: {
            name:telphone,
          }
        })
     },



  }
}
</script>


<style scoped>
.imga>>>.el-icon-circle-close {
      color: white;
    }

     .title_box{
        display: flex;
        align-items: center;
        margin-top: 8px;
    }
    .dian{
        width: 8px;
        height: 8px;
        background: #F1C94A;
        border-radius:50%;
        margin-right: 8px;
    }
    .title_name{
        font-size: 14px;;
        font-weight: 400;
        color: #000000;
    }
    .box_top{
       display: flex;
       margin-top:20px;
    }
    .box_top_img{
        width:60px;
        height: 60px;
    }
    .box_top_img>img{
        width:100%;
        height:100%;
        border-radius:50%;
    }
    .box_top_con{
        margin-left:10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .box_img_box{
        display: flex;
        margin-top: 10px;
    }
    .item_img_box:first-child{
        margin-left: 0px;
    }
    .item_img_box{
        flex:1;
        
        margin-left:5px;
    }
    .item_img_box>.imgbox{
        width: 100%;
        height:150px;
    }
    .imgbox{
        width: 100%;
        height:150px;
    }
    .item_img_name{
        margin-top: 10px;
        text-align: center;
    }
</style>